import React from 'react';

import "./static/css/index.css";
import Swiper from 'swiper';

import {Link} from 'react-router';
import axios from 'axios';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
        }
    }
    componentWillMount(){
        var that=this;
        axios.get('http://127.0.0.1:2000/api/product')
            .then(function (response) {
                that.setState({list:response.data.result})
            })
            .catch(function (error) {
                console.log(error);
            });  
    }
    componentDidMount(){
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            centeredSlides: true,
            autoplayDisableOnInteraction: false
        });
    }
    render(){
         return(
             <div>
                 <header>
                      
                        <Link to="/Search">
                           
                                <span className="iconfont icon-sousuo"></span>
                                <input type="text" name="" placeholder="搜索商家、商品名称"/>
                           
                        </Link>
                    
                </header>


   
            <div className="lunbo">
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide">
                            <a href="javascript:"><div className="container"><img src="img1.jpeg"/></div><span>美食</span></a>
                            <a href="javascript:"><div className="container"><img src="img2.jpeg"/></div><span>甜品饮品</span></a>
                            <a href="javascript:"><div className="container"><img src="img3.jpeg"/></div><span>商超便利</span></a>
                            <a href="javascript:"><div className="container"><img src="img4.jpeg"/></div><span>预定早餐</span></a>
                            <a href="javascript:"><div className="container"><img src="img5.jpeg"/></div><span>果蔬生鲜</span></a>
                            <a href="javascript:"><div className="container"><img src="img6.jpeg"/></div><span>新店特惠</span></a>
                            <a href="javascript:"><div className="container"><img src="img7.jpeg"/></div><span>准时达</span></a>
                            <a href="javascript:"><div className="container"><img src="img8.jpeg"/></div><span>简餐</span></a>
                        </div>
                        <div className="swiper-slide">
                            <a href="javascript:"><div className="container"><img src="img1.jpeg"/></div><span>美食</span></a>
                            <a href="javascript:"><div className="container"><img src="img2.jpeg"/></div><span>甜品饮品</span></a>
                            <a href="javascript:"><div className="container"><img src="img3.jpeg"/></div><span>商超便利</span></a>
                            <a href="javascript:"><div className="container"><img src="img4.jpeg"/></div><span>预定早餐</span></a>
                            <a href="javascript:"><div className="container"><img src="img5.jpeg"/></div><span>果蔬生鲜</span></a>
                            <a href="javascript:"><div className="container"><img src="img6.jpeg"/></div><span>新店特惠</span></a>
                            <a href="javascript:"><div className="container"><img src="img7.jpeg"/></div><span>准时达</span></a>
                            <a href="javascript:"><div className="container"><img src="img8.jpeg"/></div><span>简餐</span></a>
                        </div>
                    </div>
       
                    <div className="swiper-pagination"></div>
                </div> 
                <img src="hb.png" alt="" className="hb"/>
    </div> 

   <div className="content">
       <div className="notice">
           <ul>
                <li>
                   <div className="info">
                        <strong>满20减10</strong>
                        <span>广深大聚惠</span>
                   </div>
                   <img src="list1.png" alt=""/>
               </li>
                <li>
                   <div className="info">
                        <strong>霸王餐</strong>
                        <span>领20元红包</span>
                   </div>
                   <img src="list1.png" alt=""/>
               </li>
               <li>
                   <div className="info">
                        <strong>营养快餐</strong>
                        <span>15元吃饱</span>
                   </div>
                   <img src="list2.png" alt=""/>
               </li>
                <li>
                   <div className="info">
                        <strong>立减15元</strong>
                        <span>周三菜系日</span>
                   </div>
                   <img src="list2.png" alt=""/>
               </li>
           </ul>
       </div>

       <section className="shoplists">
   			<h3 className="tj">推荐商家</h3>
               {this.state.list.map(function(value,key){
                   return <section className="list clearfix" key={key}>    
                <Link to={{pathname:"/Detail/"+value._id}}>
            	<div className="list-img"><img src={`http://127.0.0.1:2000/${value.img}`} alt=""/></div>
            	<div className="listtxt">
               		<h3>{value.title} </h3>
               		<div className="txt1"><img src="start.jpg"/>月售744单</div>
               		<div className="txt2 clearfix">
                   		<div className="txt2-money">
                       		<span>¥{value.price}起送  /</span>
                       		<span>配送费¥3 /</span>
                       		<span>¥13/人</span>
                   		</div>
                   		<div className="txt2-time">
                        	<span>2.48km</span><span>47分钟</span>
                   		</div>
               		</div>
            	</div>
                </Link>
        	</section>
               })}
        	
        </section>
   	</div>
</div>
         )
    }
}


export default Home;